<template>

  <div class="main">
    <div class="logo">
      <h1>欢迎加入本项目</h1>
    </div>

    <div class="photo">
      <img src="/join.svg" />
    </div>

    <div class="operate">
      <a-button type="default" @click="router.push('/')" size="large">返回首页</a-button>
      <span style="padding: 0 30px;"></span>
      <a-button type="primary" @click="joinIn" size="large">确认加入</a-button>
    </div>
  </div>

</template>

<script setup lang="ts">

import {onMounted} from "vue";
import {useRoute} from "vue-router";
import router from "@/router";
import axios from "@/axios";
import {message} from "ant-design-vue";

const token = useRoute().params.token;

onMounted(() => {
  console.log(token);
})

const joinIn = () => {
  axios.post(`/join`, {
    token: token
  }).then((response) => {
    message.success(response.message)
    // 返回首页
    router.push('/')
  })
}
</script>

<style scoped lang="less">

.main {
  text-align: center;
  .logo {
    text-align: center;
    padding-top: 80px;
  }
  .photo {
    margin: auto;
    width: 600px;
    height: 400px;
  }
  .operate {
    margin: 80px auto auto;
  }
}

</style>